@charset "utf-8";
*{
    padding: 0;
    margin: 0;
    text-decoration: none;
    list-style: none;
    font-family: 微软雅黑,sans-serif;
    color: #9a9898;
	font-size: 14px;
}
/* 1.网页头部： 设置宽高 100% 高 47px 边框 */
header{
    width: 100%;
    height: 60px;
    bor der: 1px solid red;
    background-color: #333;
}
/* 2.网页中控、显示主题内容、占主体、页尾中控，水平居中*/
div#wrapper{
    width: 1534px;
    height: 60px;/* 考虑： 主体、页尾占宽度＋高度 */
    bac kground-color: #00ff00;
    /* 居中 */
    margin: 0 auto;
}
/* 3.网页中控区： 左侧部分 */
div#wrapper div.left{
    width: 839px;
    height: 60px;
    ba ckground-color: #eedf09;
    float: left;
}
/* 3.1左侧部分 li 导航数据：布局： 浮动 */
div#wrapper div.left ul li{
    float: left;
    height: 60px;
    
}
/* 3.2左侧部分 li a 垂直居中 */
div#wrapper div.left ul li a{
    border-right: 1px solid #424242;
    line-height: 60px;
    padding: 0 14px;
    
}
/* 3.3左侧部分： 最后一个竖边拿下 */
div#wrapper div.left ul li a.fix{
    border: none;
}
/* 购物车区域：背景颜色 */
div#wrapper div.right ul li.ul_right{
	background-color: #424242;
	width: 180px;
}
/* 4.网页中控区： 右侧部分 */
div#wrapper div.right{ 
    width: 320px;
    height: 60px;
    background-color: #333;
    float: right;
    
}
/* 4.1 */
div#wrapper div.right ul li{
	float: right;
}
div#wrapper div.right ul li a{
    border-right: 1px solid #424242;
    line-height: 60px;
    padding: 0 8px;
    
}
/* 4.2购物车精灵图 */
div#wrapper div.right ul li i.shop{
	bord er: 1px solid red;
	padding: 0 10px;
	background: url(../img/buy.png) no-repeat;
	mar gin-top: 10px;
	position: relative;
	top: 3px;
}
/* 购物车悬停效果：三个地方改变：背景改
							   背景改同时改超链接
							   背景改同时改精灵图
 */
div#wrapper div.right ul li.ul_right:hover{
	background-color: #fff;
}
div#wrapper div.right ul li.ul_right:hover a{
	color:#ffaa00;
}
div#wrapper div.right ul li.ul_right:hover i.shop{
	background: url(../img/buy01.png) no-repeat;
}
/* 结束：添加悬停 颜色 白色 */
div#wrapper div.left ul li a:hover,div#wrapper div.right ul li a:hover{
	colorr:#fff;
}